<template>
	<!--房屋列表-->
	<div class="houselist list4 list4list">
		<screen-nav @setval="setval" @getlongHouseList="getlongHouseList"></screen-nav>
		<!--房屋内容-->
		<div class="house">
			<long-view :data="getlongHouseListdata" @getlongHouseList="getlongHouseList" ref="longliatchild"></long-view>
		</div>
	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	import ScreenNav from "./ScreenNav";
	import LongView from "./LongView";

	export default {
		name: 'longList',
		data() {
			var that = this;
			return {
				//				latIf: true,
				page: 1,
				pageSize: [],
				getlongHouseListdata: [],
				mykey: that.$route.query.mykey,
				cityId: that.$route.query.cityId,
				//				page: that.$route.params.page,
				area_id: that.$route.query.area_id,
				lat: that.$route.query.lat,
				lng: that.$route.query.lng,
				house_type: that.$route.query.house_type,
				room: that.$route.query.room,
				houseMasterId: that.$route.query.houseMasterId,
				price_bottom: that.$route.query.price_bottom,
				price_top: that.$route.query.price_top,
				tags: that.$route.query.tags,
				equipment: that.$route.query.equipment,
				price_order: that.$route.query.price_order,
				accordionDH: true,
				tiemDH: true,
				moreDH: true,
				RecommendDH: true,
				//				地理筛选
				blocksData: [],
				//				标签筛选
				tagsData: [],
				//				设施筛选
				AmenityData: [],
				//				更多推荐
				value9: [0, 3000],
				maxnum: 3000,
				pands: 0,
				leiType: true,
				isFirstEnter: false // 是否第一次进入，默认false
			}
		},
		beforeRouteEnter(to, from, next) {
			if(from.name == 'longDetails') {
				to.meta.isBack = true;
			}
			next();
		},
		activated() {
			var that = this;
			if((!that.$route.meta.isBack) || that.isFirstEnter) {

				that.mykey = that.$route.query.mykey,
					that.cityId = that.$route.query.cityId,
					that.page = 1,
					that.area_id = that.$route.query.area_id,
					that.lat = that.$route.query.lat,
					that.lng = that.$route.query.lng,
					that.house_type = that.$route.query.house_type,
					that.room = that.$route.query.room,
					that.houseMasterId = that.$route.query.houseMasterId,
					that.price_bottom = that.$route.query.price_bottom,
					that.price_top = that.$route.query.price_top,
					that.tags = that.$route.query.tags,
					that.equipment = that.$route.query.equipment,
					that.price_order = that.$route.query.price_order,

					//				地理筛选
					that.blocksData = [],
					//				标签筛选
					that.tagsData = [],
					//				设施筛选
					that.AmenityData = [],
					//				更多推荐
					that.value9 = [0, 3000],
					that.maxnum = 3000,
					that.pands = 0,
					that.leiType = true,
					that.isFirstEnter = false // 是否第一次进入，默认false

				that.accordionDH = true;
				that.tiemDH = true;
				that.moreDH = true;
				that.RecommendDH = true;

				that.getlongHouseListdata = [];
				that.getlongHouseList(that.page);
			} else {

				that.accordionDH = true;
				that.tiemDH = true;
				that.moreDH = true;
				that.RecommendDH = true;
			}
			that.$route.meta.isBack = false;
			that.isFirstEnter = false;

		},
		created() {
			var that = this;
			that.isFirstEnter = true;
		},
		computed: {
			...mapGetters([
				'source',
			])
		},
		methods: {
			setval() {
				var that = this;
				that.mykey = that.$route.query.mykey; // string 否 关键字
				//				that.area_id = ""; // string 否 区域id
				//				that.lat = ""; // string 否 进行经纬度搜索时传入
				//				that.lng = ""; // string 否 进行经纬度搜索时传入
				that.house_type = that.$route.query.house_type; // string 否 1 整租 2 合租
				that.room = that.$route.query.room; // string 否 户型
				that.houseMasterId = that.$route.query.houseMasterId; // string 否 公寓搜索
				that.price_bottom = that.$route.query.price_bottom; // string 否 低价
				that.price_top = that.$route.query.price_top; // string 否 顶价
				that.tags = ""; // string 否 标签id串
				that.equipment = ""; // string 否 设备id串
				that.price_order = ""; // string 否 1 高 2 低
			},
			getlongHouseList(page) {
				var that = this;
				var ajaxSign = {
					"key": that.mykey, // string 否 关键字
					"cityId": that.cityId, // string 是
					"page": page.toString(), // string 否 分页
					"area_id": that.area_id, // string 否 区域id
					"lat": that.lat, // string 否 进行经纬度搜索时传入
					"lng": that.lng, // string 否 进行经纬度搜索时传入
					"house_type": that.house_type, // string 否 1 整租 2 合租
					"room": that.room, // string 否 户型
					"houseMasterId": that.houseMasterId, // string 否 公寓搜索
					"price_bottom": that.price_bottom, // string 否 低价
					"price_top": that.price_top, // string 否 顶价
					"tags": that.tags, // string 否 标签id串
					"equipment": that.equipment, // string 否 设备id串
					"price_order": that.price_order, // string 否 1 高 2 低
					"source": that.source // string 是
				};
				if( ajaxSign.room != undefined) {
					ajaxSign.room = ajaxSign.room.toString();
				}
				let ajaxData = api.getAES(ajaxSign);
				//				数据调用
				api.GetLongList(ajaxData)
					.then(res => {
						let ajaxdata = res.result;
						that.pageSize = ajaxdata.length;

						that.getlongHouseListdata = that.getlongHouseListdata.concat(ajaxdata);
						if((that.pageSize % 8) != 0 || that.pageSize == 0) {
							this.$refs.longliatchild.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
							return;
						} else {
							this.$refs.longliatchild.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');

						}
					})

			}
		}

		,
		components: {
			LongView,
			ScreenNav
		}

	}
</script>

<style>
	/*引入图文theme4列表样式*/
	
	@import url("../assets/css/swiper.min.css");
	.list4list .yd-accordion-head-arrow {
		margin-right: .01rem;
	}
	
	.list4list .yd-accordion-head-arrow:after {
		content: "";
		width: .18rem;
		height: .18rem;
		border: 1px solid #a0a0a0;
		border-right: none;
		border-top: none;
		display: block;
		transition: transform .1s linear;
		transform: rotate(-45deg);
	}
	
	.list4list .yd-accordion-head-arrow.yd-accordion-rotated:after {
		border-right: 1px solid #e34648;
		border-top: 1px solid #e34648;
		border-left: none;
		border-bottom: none;
		transform: rotate(-45deg);
	}
	
	.list4list .list-box {
		display: flex;
		justify-content: space-between;
	}
	
	.list4list .list-box span {
		display: block;
	}
	
	.list4list .list-item {
		width: 50%;
		text-align: center;
	}
	
	.list4list .listtags5-box {
		display: flex;
		-webkit-flex-wrap: wrap;
	}
	
	.list4list .listtags5-item {
		width: 20%;
		text-align: center;
		padding: .24rem 0;
		box-sizing: border-box;
	}
	/*房屋列表*/
	
	.list4list .houselist {
		width: 100%;
		padding-top: .1rem;
		box-sizing: border-box;
	}
	
	.list4list .housenav {
		width: 100%;
		display: -webkit-flex;
		display: flex;
		padding: .21rem 0;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-bottom: 1px;
	}
	
	.list4list .housenavitem {
		display: -webkit-flex;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		font-size: .28rem;
	}
	
	.list4list .housenavitem img {
		height: .12rem;
		margin-left: .1rem;
	}
	
	.list4list .yd-list-loading>div {
		display: block !important;
	}
</style>